><gm:page title="The Official Burdon Tracker(tm)" authenticate="false">
  
  <style>
    div {
      white-space: nowrap;
    }
    h2 {
      margin-bottom: 0px;
    }
    .header {
      background: #E8EEF7;
      padding: 4px;
      margin-bottom: 6px;
    }
    .panel {
      height: 350px;
      border: 4px solid #C3D9FF;
    }
  </style>

  <!-- 
  TODO: locate burdon button (highlight today); center map button
  TODO: postcards section (note + feed)
  -->

  <div class="header">
  <table width="100%"><tr>
  <td><h2>Burdon Tracker</h2></td>
  <td><input type="button" value="Center" style="float:right" onclick="google.mashups.getObjectById('tripMap').showAllMarkers()"/></td>
  </tr></table>
  </div>

  <table width="100%">
  <tr>
  <td width="400px" valign="top" rowspan="2">
  <div style="margin-right: 6px">

  <gm:tabs target="lists"/>
  <gm:container id="lists" class="panel" style="width:400px">
  <gm:section id="trips" title="Flights">
    <gm:list id="tripList" data="${app}/trips" template="tripTemplate" sort="date">
      <gm:handleEvent src="tripMap"/>
      <gm:sort ref="gd:when/@startTime" name="date" reverse="false"/>
    </gm:list>
  </gm:section>
  <gm:section id="postcards" title="Postcards">
    <gm:list id="postcardList" data="${app}/postcards" template="postcardTemplate" pageSize="10"/>
  </gm:section>
  </gm:container>

  </div>
  </td><td valign="top">

  <div class="panel">
    <gm:map id="tripMap" data="${tripList}" maptypes="true" control="large" create="true" height="100%">
      <gm:handleEvent src="tripList"/>
    </gm:map>
  </div>

  </td>
  </tr>
  <tr>    
  <td>
    <gm:list id="blog" data="${tripList}/blog" template="simple"/>
  </td>
  </tr>
  </table>

  <gm:template id="postcardTemplate">
    <table>
      <tbody repeat="true">
        <tr><td rowspan='3'><gm:toggle/></td><td><gm:text ref="atom:title"/></td><td><gm:editButtons/></td></tr>
        <tr class="gm-toggled"><td colspan='2'><gm:textarea ref="atom:content"/></td></tr>
        <tr class="gm-toggled"><td colspan='2'><gm:text ref="atom:link[@rel='album']/@href" style="overflow:hidden"/></td></tr>
      </tbody>
    </table>
    <gm:create label="New Postcard"/>
  </gm:template>
  
  <gm:template id="tripTemplate">
    <table style="width: 400px">
      <thead>
        <tr>
          <td><gm:header sort="date">Dep</gm:header></td>
          <td>Destination</td>
          <td>Dep</td>
          <td>Arr</td>
          <td></td>
        </tr>
        <tr></tr>
      </thead>
      <tbody repeat="true">
        <tr>
          <td>
            <gm:date ref="gd:when/@startTime"/>
          </td>
          <td width="100%">
            <gm:text ref="atom:title"/>
          </td>
          <td>
            <gm:text ref="gmd:departure" size="3"/>
          </td>
          <td>
            <gm:text ref="gmd:arrival" size="3"/>
          </td>
          <td align="right">
            <gm:editButtons/>
          </td>
       </tr>
      </tbody>
    </table>
    <br/>
    <gm:create label="New Trip"/>
  </gm:template>
  
</gm:page>